<template>
    <div 
        class="Hex"
        ref="Hex"
        :style="styleObj">
        <div 
            v-for='(i,j) in currentList'
            :key="j">
            <!-- <template v-if="i==1">
                <Yang></Yang>
            </template>
            <template v-else>
                <Yin :type='i'></Yin>
            </template> -->
            <Yao :Type='i'></Yao>
        </div>
    </div>
</template>
<script>
// import Yang from '@/components/Yang.vue'
// import Yin from '@/components/Yin.vue'
import Yao from '@/components/Yao.vue'
/**
 * @modules Hex
 * @desc 根据传入的Hex值从数组中取对应数组，生成卦象
 * @author Sakura
 * @data 2020.08.22
 * @Attributes [Width] {String} 卦象宽度
 * @Attributes [Hex] {Number} 0-7,取对应卦象
 * @example 示例
 * <Hex width='100px' :Hex=1></Hex>
 */
export default {
    name:"Hex",
    props:{
         Width:{
            type:String,
            required:false,
            default:'100px'
        },
        Hex:{
            type:Number,
            required:true,
            default:0
        }
    },
    data(){
        return{
            //经卦宽度
            selfWidth:'',
            //卦象数组
            DiagramsList:[
                [1,1,1],
                [0,0,0],
                [0,0,1],
                [1,0,0],
                [1,0,1],
                [0,1,0],
                [0,1,1],
                [1,1,0],
            ],
            currentList:[],
            styleObj:{
                width:'',
                height:'',
                borderLeftWidth:'',
                borderRightWidth:''
            }
        }
    },

    components:{
        // Yang,
        // Yin,
        Yao
    },
    created(){
        //根据外界传入的Hex值将卦象数组数据赋值给当前数组
        this.currentList=this.DiagramsList[this.Hex]
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            if(this.Width.indexOf('%')>-1){
                this.styleObj.width=this.Width
                this.$nextTick(()=>{
                    //获得元素块的宽度
                    this.selfWidth=this.$refs.Hex.offsetWidth
                    this.CalcPx()
                })
            }else{
                // 传入数字或px数据
                this.selfWidth=parseInt(this.Width)
                //只传入字母
                if(isNaN(this.selfWidth)){
                    this.selfWidth=1
                }
                this.CalcPx()
            }
        },
        // 计算高度，左右边框
        CalcPx(){
            // 设置最小宽度为10px
            this.selfWidth=this.selfWidth<100?100:this.selfWidth
            // 设置宽度
            this.styleObj.width=this.selfWidth+'px'
            //设置高度
            this.styleObj.height=this.selfWidth*0.75+'px'
        } 
    }
}
</script>
<style scoped>
.Hex{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>